<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getRequest, postPutRequest} from "@/api/data.ts";
import {useMessage} from 'naive-ui';
import ImageSelection from "@components/ImageSelection";


const message = useMessage()
//客服设置
const loadings = ref<boolean>(false);
const btnLoading = ref<boolean>(false);

const customerForm = ref({
  name: null,
  phone: null,
  qr_code: null,
  name1: null,
  phone1: null,
  qr_code1: null,
  name2: null,
  phone2: null,
  qr_code2: null,
})
const handelSave = (e: MouseEvent) => {
  e.preventDefault();
  btnLoading.value = true;
  postPutRequest('conf/save_customer', customerForm.value).then((result: ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
        onLeave() {
          btnLoading.value = false;
        }
      })
    } else {
      message.error(result.message);
      btnLoading.value = false;
    }
  })
}
//获取配置参数
const getSettings = async () => {
  await getRequest('conf/get_settings', {type: 'customer'}, true).then((result: ResponseResult) => {
    const {data} = result;
    const {customer} = JSON.parse(data);
    if (customer) {
      customerForm.value = {
        name: customer.name ?? null,
        phone: customer.phone ?? null,
        qr_code: customer.qr_code ?? null,
        name1: customer.name1 ?? null,
        phone1: customer.phone1 ?? null,
        qr_code1: customer.qr_code1 ?? null,
        name2: customer.name2 ?? null,
        phone2: customer.phone2 ?? null,
        qr_code2: customer.qr_code2 ?? null,
      };
    }
    loadings.value = false;
  })
}

onMounted(() => {
  loadings.value = true;
  getSettings();
})
</script>

<template>
  <n-form
      ref="customer_form"
      :model="customerForm"
      require-mark-placement="left"
      label-placement="left" :label-width="90">
    <n-spin size="medium" v-model:show="loadings">
      <p><span class="titles">客服一</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="客服名称:" path="name">
          <n-input v-model:value="customerForm.name" placeholder="客服一名称" maxlength="20" show-count
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="客服电话:" path="phone">
          <n-input v-model:value="customerForm.phone" placeholder="客服一电话" maxlength="11" show-count
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="二维码:" path="qr_code" :show-feedback="false">
          <image-selection v-model:value="customerForm.qr_code"/>
        </n-form-item-gi>
      </n-grid>
      <p><span class="titles">客服二</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="客服名称:" path="name1">
          <n-input v-model:value="customerForm.name1" placeholder="客服二名称" maxlength="20" show-count
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="客服电话:" path="phone1">
          <n-input v-model:value="customerForm.phone1" placeholder="客服二电话" maxlength="11" show-count
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="二维码:" path="qr_code1" :show-feedback="false">
          <image-selection v-model:value="customerForm.qr_code1"/>
        </n-form-item-gi>
      </n-grid>
      <p><span class="titles">客服三</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="客服名称:" path="name2">
          <n-input v-model:value="customerForm.name2" placeholder="客服三名称" maxlength="20" show-count
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="客服电话:" path="phone2">
          <n-input v-model:value="customerForm.phone2" placeholder="客服三电话" maxlength="11" show-count
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="二维码:" path="qr_code2" :show-feedback="false">
          <image-selection v-model:value="customerForm.qr_code2"/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="&nbsp;"  style="margin-top: 15px;">
          <n-button type="primary" :loading="btnLoading" @click="handelSave">保存客服设置</n-button>
        </n-form-item-gi>
      </n-grid>
    </n-spin>
  </n-form>
</template>

<style scoped lang="scss">

</style>